<%@ page language="java" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<div class="table-div">
	<div class="table-operator">
		<button class="btn green formbtn-add" data-action="save">Add</button>
	</div>
	<div class="clearfix"></div>
	<div class="table-filter">&nbsp;</div>
	<div class="table-body">
		<table class="table table-striped table-hover table-bordered "></table>
	</div>
</div>

<script>
	var baseUrl = "rest/admin/menu/";
	var $table = $(".table-body>table");
	var tb = $table.DataTable({
				ajax : {
					url : baseUrl + "listData",
					dataSrc : ""
				},
				columnDefs : [ {
					orderable : false,
					targets : [ 0,3]
				} ],
				order : [ [ 2, 'asc' ] ],
				columns : [
					{
						title : "",
						data : "id",
						createdCell : function(td, tdData, rowData,
								rowIndex, colIndex) {
							var btn = $("<span class='row-details row-details-close'></span>")
							$(td).html(btn);
						},
						width : "1%"
					},
					{
						title : "菜单名称",
						data : "permissionName",
						createdCell:function(td,tdData,rowData){
							var menu = createMenu(rowData);
							$(td).html(menu);
						}
					}, {
						title : "菜单排序",
						data : "sort"
					}, {
						title : "操作",
						data : "id",
						createdCell:function(td,tdData){
							var delBtn = C.createDelBtn(tdData);
							var editBtn = C.createEditBtn(tdData,"编辑","save");
							var addSubmenuBtn = createAddSubmenuBtn(tdData);
							var operator = [addSubmenuBtn,editBtn,delBtn];
							$(td).html(operator);
						}
					} ],
			});
	currentDt = tb;
	
	//绑定左边加号事件
	$table.on('click',"td>.row-details",function(){
		if($(this).hasClass("row-details-close")){
			$(this).removeClass("row-details-close");
			$(this).addClass("row-details-open");
			openChildren(this);
		}else{
			$(this).removeClass("row-details-open");
			$(this).addClass("row-details-close");
			closeChildren(this);
		}
	});

	//通过ParentId 打开子菜单
	function loadSubMenuByPid(pid){
		$("td>.row-details").each(function(){
			var tr = $(this).parents('tr');
		    var row = tb.row( tr );
		    var data = row.data();
		    if(data.id==pid){
		    	loadSubMenu(row);
		    }
		});
	}

	//打开子菜单
	function openChildren(span){
		var tr = $(span).parents('tr');
	    var row = tb.row( tr );
	    loadSubMenu(row);    	
	}
	
	//加载子菜单
	function loadSubMenu(row){
		row.child("加载中....").show();
		var parentMenu = row.data();
		C.ajax(baseUrl+"listData",{parentId:parentMenu.id},function(menuList){
			if(row.child.isShown()){
				if(menuList.length==0){
					var notSubMenu = $("<p>还没有子菜单，赶快添加一个吧 </p>");
					var addMenubtn = createAddSubmenuBtn(parentMenu.id);
					notSubMenu.append(addMenubtn);
					row.child(notSubMenu);
				}else{
					row.child(formatSubMenu(menuList,parentMenu.id));
				}
			}
		});
	}
	
	//格式化子菜单格式
	function formatSubMenu(menuList,rootPid){
		var wapper  = $("<table></table>").addClass("table table-striped table-hover table-bordered");
		for(var i in menuList){
			var menu = menuList[i];
			var t_Name = $("<td>").html(createMenu(menu));
			var t_Url = $("<td>").html(menu.permissionSign);
			var t_Sort = $("<td>").html(menu.sort);
			var t_Operator = $("<td>");
			var t_subPermission= $("<td data-menu='"+menu.id+"'>").html("正在加载子权限");
			t_Operator.append([C.createEditBtn(menu.id,"编辑","save"),
			                   C.createDelBtn(menu.id),
			                   createAddSubPermissionBtn(menu.id,rootPid)]);
			var tr = $("<tr>").html([t_Name,t_Url,t_Sort,t_subPermission,t_Operator]);
			wapper.append(tr);
		}
		wapper.find("td[data-menu]").each(function(){
			var subTd = $(this);
			var pid = $(this).data("menu");
			C.ajax(baseUrl+"listData",{parentId:pid},function(subMenuList){
				if(subMenuList.length==0){
					subTd.html("无");
				}else{
					var subMArray = new Array();
					for(var i in subMenuList){
						var subM = subMenuList[i];
						subM.pid=rootPid;
						var btn = createEditSubPermissionBtn(subM);
						subMArray.push(btn);
					}
					subTd.html(subMArray);
				}
			});
		});
		return wapper;
	}
	
	function createMenu(rowData){
		var menu = $("<span>"+"<i class='fa "+rowData.icon+"'></i> "+ rowData.permissionName+"</span>");
		return menu;
	}
	
	
	function createAddSubmenuBtn(parentId){
		return C.createFormBtn({
			name:"添加子菜单",
			url:baseUrl+"add",
			formaction:baseUrl+"save",
			style:"btn btn-xs green",
			aftersuccess:function(){
				loadSubMenuByPid(parentId);
			},
			afterload:function(formDom){
				formDom.find("[name='parentId']").attr("data-selected",parentId);
			}
		});
	}
	
	function createAddSubPermissionBtn(parentId,rootPid){
		var subPermissionBtn = $("<button class='btn btn-xs green'>添加子权限</button>");
		subPermissionBtn.click(function(){
			C.loadForm({
				url:baseUrl+"addSub",
				formaction:baseUrl+"addSubData",
				afterload:function(formDom){
					formDom.find("[name='parentId']").attr("data-selected",parentId);
				},
				aftersuccess:function(){
					loadSubMenuByPid(rootPid);
				}
			});
		});
		return subPermissionBtn;
	}
	function createEditSubPermissionBtn(subM){
		var subPermissionBtn = $("<button class='btn btn-xs blue'>"+subM.permissionName+" <i class='fa fa-times del'></i></button>");
		subPermissionBtn.click(function(){
			C.loadForm({
				url:baseUrl+"editSub",
				formaction:baseUrl+"editSubData",
				data:{id:subM.id},
				aftersuccess:function(){
					loadSubMenuByPid(subM.pid);
				}
			});
		});
		subPermissionBtn.find(".del").click(function(e){
			C.confirmDialog("你确定要删除吗?","警告",function(){
				C.ajax(baseUrl+"delete",{id:subM.id},function(result){
					if(result.success){
						simpleMsg("删除成功");
						loadSubMenuByPid(subM.pid);
					}else{
						errorMsg(result.message);
					}
				});
			});
			e.stopPropagation();
		});
		return subPermissionBtn;
	}
	
	function closeChildren(span){
		var tr = $(span).parents('tr');
	    var row = tb.row( tr );
	    if(row.child.isShown()){
	    	row.child.hide();
	    }
	}

</script>